:root {
    --background-color: #202e3b;
    --border-color: #7591AD;
    --text-color: #34495e;
    --color1: #EC3E27;
    --color2: #fd79a8;
    --color3: #0984e3;
    --color4: #00b894;
    --color5: #fdcb6e;
    --color6: #e056fd;
    --color7: #F97F51;
    --color8: #BDC581;
}


/* 
 * 图标字体库
 * 来自iconfont.cn
 */

@font-face {
    font-family: "iconfont";
    src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 18px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* 内有五个图标 */

.icon-weibo:before {
    content: "\e625";
}

.icon-sharearrow:before {
    content: "\e71d";
}

.icon-google:before {
    content: "\eeda";
}

.icon-weixin:before {
    content: "\eb59";
}

.icon-tt:before {
    content: "\e60b";
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
}

body {
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
}

.channel {
    position: absolute;
    width: 80%;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -200px);
    font-size: 30px;
    font-weight: bold;
    color: #fff;
}

.container {
    width: 600px;
    height: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* background-color: rosybrown; */
}

.icon {
    position: relative;
    width: 80px;
    height: 80px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.icon i {
    font-size: 40px;
}

.icon h1 {
    position: absolute;
    top: 0px;
    padding: 12px 24px;
    border-radius: 30px;
    color: #fff;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
    /* 默认隐藏 */
    opacity: 0;
    /* 知识点：贝塞尔曲线，让动画变得顺畅有节奏 */
    transition: 0.5s cubic-bezier(.18, 1.09, .77, 1.33);
    /* 知识点：不响应鼠标事件 */
    pointer-events: none;
}


/* 制作消息框的下方小三角 */

.icon h1::before {
    /* 神奇的操作 */
    position: absolute;
    content: '';
    width: 15px;
    height: 15px;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

.icon.weibo h1,
.icon.weibo h1::before {
    background-color: var(--color1);
}

.icon.google h1,
.icon.google h1::before {
    background-color: var(--color2);
}

.icon.weixin h1,
.icon.weixin h1::before {
    background-color: var(--color3);
}

.icon.tt h1,
.icon.tt h1::before {
    background-color: var(--color4);
}

/* 按钮鼠标移入时变色 */
.icon.weibo:hover {
    background-color: var(--color1);
    color: #fff;
}

.icon.google:hover {
    background-color: var(--color2);
    color: #fff;
}

.icon.weixin:hover {
    background-color: var(--color3);
    color: #fff;
}

.icon.tt:hover {
    background-color: var(--color4);
    color: #fff;
}

.icon:hover h1{
    opacity: 1;
    top: -80px;
}